 <template>
  <div class="rating_page">
    <head-top head-title="修改真实姓名" go-back="true"></head-top>
    <section class="setname">
      <section class="setname-top">
        <input
          type="text"
          placeholder="输入真实姓名"
          :class="{ 'setname-input': bordercolor }"
          @input="inputThing"
          v-model="inputValue"
        />
        <div>
          <p v-if="earn">真实姓名只能修改一次（2-24字符之间）</p>
          <p class="unlikep" v-else>真实姓名长度在2到24位之间</p>
        </div>
      </section>
      <section class="setname-top">
        <input
          type="text"
          placeholder="输入手机号"
          :class="{ 'setname-input': bordercolorPhone }"
          @input="inputThingphone"
          v-model="phone"
        />
        <div>
          <p v-if="earnphone">手机号只能修改一次（11位手机号）</p>
          <p class="unlikep" v-else>手机号验证错误</p>
        </div>
      </section>
      <section class="setname-top">
        <input
          type="text"
          placeholder="输入工牌号"
          :class="{ 'setname-input': bordercolorcardno }"
          @input="inputThingcardno"
          v-model="cardno"
        />
        <div>
          <p v-if="earnpcardno">工牌号只能修改一次</p>
          <p class="unlikep" v-else>工牌号验证错误</p>
        </div>
      </section>
      <section class="reset">
        <button
          :class="{
            fontopacity: opacityall && opacityallphone && opacityallcardno,
          }"
          @click="resetName"
        >
          确认修改
        </button>
      </section>
    </section>
  </div>
</template>

<script>
import headTop from "src/components/header/head";
import { getImgPath } from "src/components/common/mixin";
import { mapMutations, mapState } from "vuex";
import { changeUserInfo } from '../../../../service/getData'
export default {
  data() {
    return {
      earn: true, //输入框提醒
      bordercolor: false, //输入框边框颜色
      opacityall: false, //字体透明度
      inputValue: "", //输入框的内容
      newusername: "", //新用户名
      phone: "",
      earnphone: true,
      bordercolorPhone: false,
      opacityallphone: false,
      cardno: "",
      earnpcardno: true,
      bordercolorcardno: false,
      opacityallcardno: false,
    };
  },
  created() {},
  mixins: [getImgPath],
  components: {
    headTop,
  },
  mounted() {},
  computed: {
    ...mapState(["userInfo"]),
  },
  props: [],
  methods: {
    ...mapMutations(["RETSET_NAME"]),
    inputThingcardno() {
      if (!this.cardno) {
        this.earnpcardno = false;
        this.bordercolorcardno = true;
        this.opacityallcardno = false;
        return false;
      } else {
        this.earnpcardno = true;
        this.bordercolorcardno = false;
        this.opacityallcardno = true;
        return true;
      }
    },
    inputThing() {
      if (this.inputValue.length < 2 || this.inputValue.length > 24) {
        this.earn = false;
        this.bordercolor = true;
        this.opacityall = false;
        return false;
      } else {
        this.earn = true;
        this.bordercolor = false;
        this.opacityall = true;
        return true;
      }
    },
    inputThingphone() {
      if (
        !/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(
          this.phone
        )
      ) {
        this.earnphone = false;
        this.bordercolorPhone = true;
        this.opacityallphone = false;
        return false;
      } else {
        this.earnphone = true;
        this.bordercolorPhone = false;
        this.opacityallphone = true;
        return true;
      }
    },
    async resetName() {
      let checkResult = this.inputThing();
      let checkResultphone = this.inputThing();
      let checkResultcardno = this.inputThing();

      if (!checkResult || !checkResultphone || !checkResultcardno) {
        return;
      }
      const data = {truename: this.inputValue, card_no: this.cardno, phone: this.phone}
      await changeUserInfo({...data, uid: this.$store.state.uid})
      this.RETSET_NAME(data);
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.rating_page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 202;
  background: #f2f2f2;
  padding-top: 1.95rem;
  p,
  span {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
}
.setname {
  width: 15.2rem;
  margin: 0 auto;
  .setname-top {
    padding-top: 0.4rem;
    input {
      background: none;
      width: 15.2rem;
      border: 1px solid #ddd;
      @include borderRadius(2px);
      padding: 0.2rem 0.1rem;
      line-height: 1.2rem;
      font-size: 0.7rem;
      display: block;
    }
    .setname-input {
      border-color: #ea3106;
    }
    p {
      width: 100%;
      @include sc(0.4rem, #666);
      padding: 0.4rem 0 1rem;
    }
    .unlikep {
      @include sc(0.58rem, #ea3106);
      padding-top: 0.1rem;
    }
  }
  .reset {
    width: 100%;
    background: #3199e8;
    button {
      display: block;
      width: 100%;
      background: none;
      line-height: 2rem;
      @include sc(0.7rem, #fff);
      opacity: 0.6;
      transition: all 1s;
    }
    .fontopacity {
      transition: all 1s;
      opacity: 1;
    }
  }
}
</style>
